forum

home / developersection / forums / table with dark background and with striped between them

Ask Question

Table with dark background and with striped between them

Ethan Karla 473 28-Jul-2021

How to make a table with dark background and striped between them?

bootstrap bootstrap 
Updated on 28-Jul-2021
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

29-Jul-2021

You can use Bootstrap's table classes to create a table with a dark background and a stripe between them.

Bootstrap library comes with table classes to create tables with lots of functionalities. You can use different classes of bootstrap tables to create nice look and feel tables with extended custom styling by writing small lines of code in it.

The examples below show the following table that are described in Bootstrap :

<!doctype html>

<html lang='en'>

<head>

    <!-- Required meta tags -->

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <!-- Bootstrap CSS -->

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='container'>

        <table class='table table-striped table-dark table-hover text-center'>

            <thead>

                <tr>

                    <th scope='col'>#</th>

                    <th scope='col'>First</th>

                    <th scope='col'>Last</th>

                    <th scope='col'>Job Role</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <th scope='row'>1</th>

                    <td>Mark</td>

                    <td>Walter</td>

                    <td>Graphic Designer</td>

                </tr>

                <tr>

                    <th scope='row'>2</th>

                    <td>Ashish</td>

                    <td>Wilson</td>

                    <td>Content Writer</td>

                </tr>

                <tr>

                    <th scope='row'>3</th>

                    <td>Anush</td>

                    <td>Aaron</td>

                    <td>Software Developer</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>

    -->

</body>

</html>

Output:

Table with dark background and with striped between them

Hope it will help you to solve your query!

Happy Coding!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy